<template>
	<view id="index">

		<!-- 顶部导航 -->
		<uni-nav-bar v-if="navBarShowTag">
			<view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯</view>
			</view>
		</uni-nav-bar>



		<!-- 页面 header 相关部分 -->
		<view class="header-box">
			<!-- 顶部广告位轮播图 -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="item in swiperAdList" :key="item.id">
					<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+encodeURI(item.link)">
						<image class="banner-swiper-img" :src="item.image" mode="aspectFill" />
					</navigator>
				</swiper-item>
			</swiper>
			<!-- 遮罩使用弧形框 -->
			<image class="crile" src="@/static/crile.png" mode="aspectFill" />
			<!-- 两个选项按钮 -->
			 <view class="card-header">
				<view class="card-one card-left" @tap="gotoSwitch('/pages/feeds/feeds')">
					<image class="img" src="@/static/coffee.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">精彩动态</view>
					</view>
				</view>
				<view class="card-one card-right" @tap="gotoSwitch('/pages/store/store')">
					<image class="img" src="@/static/ran.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">优选商城</view>
					</view>
				</view>
			</view> 

			<!-- Tab 选项卡 -->
			<view class="tabs-box">
				<view class="one-nav" :class="currentSwiperIndex === 0 ? 'nav-actived' : '' " @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived' : '' " @tap="swiperChange(1)">资讯</view>
			</view>

		</view>

        <!-- 内容轮播导航实现 -->
        <swiper  class="swiper-box" :style=" 'height:'+swiperHeight " :current="currentSwiperIndex" @animationfinish="swiperSlider">
        	<!-- 推荐动态实现 -->
        	<swiper-item class="swiper-item">
        		<view class="page-item sns-now">
        			<view class="feeds-box">
        				<u-waterfall-sns v-model="feedsList" ref="uWaterfall">
        					<template v-slot:left="{leftList}">
        						<view class="feed-one" v-for="(item, index) in leftList" :key="index">
        							<navigator :url=" '/subpages/feedinfo/feedinfo?id=' + item.id ">
        								<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
        								<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
        								<view class="feed-info">
        									<view class="iview">
        										<image class="avatar" :src=" item.avatar" />
        										<text class="name u-line-1">{{ item.name }}</text>
        									</view>
        									<view class="iview">
        										<view class="ilike" @tap.stop="clickLove(item)">
        											<image v-if="item.has_liked" src="@/static/lover.png" class="micon" />
        											<image v-else src="@/static/love.png" class="micon" />
        											<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
        										</view>
        									</view>
        								</view>
        							</navigator>
        						</view>
        					</template>
        					<template v-slot:right="{rightList}">
        						<view class="feed-one" v-for="(item, index) in rightList" :key="index">
        							<navigator :url=" '/subpages/feedinfo/feedinfo?id=' + item.id ">
        								<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
        								<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
        								<view class="feed-info">
        									<view class="iview">
        										<image class="avatar" :src=" item.avatar" />
        										<text class="name u-line-1">{{ item.name }}</text>
        									</view>
        									<view class="iview">
        										<view class="ilike" @tap.stop="clickLove(item)">
        											<image v-if="item.has_liked" src="@/static/lover.png" class="micon" />
        											<image v-else src="@/static/love.png" class="micon" />
        											<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
        										</view>
        									</view>
        								</view>
        							</navigator>
        						</view>
        					</template>
        				</u-waterfall-sns>
        			</view>
        		</view>
        	</swiper-item>
        	<!-- 资讯列表实现 -->
        	<swiper-item class="swiper-item sns-news">
        		<view v-for="(item, index) in newsList" :key="index">
        			<navigator class="one-new" :url=" '/subpages/newinfo/newinfo?id=' + item.id ">
        				<view class="left">
        					<view class="title u-line-2">{{item.title}}</view>
        					<view class="uinfo">
        						<view class="iview">
        							<view class="utime">
        								<text class="name">{{ item.author }}</text>
        							</view>
        						</view>
        						<text class="uptime">{{ item.created_at }}发布</text>
        					</view>
        				</view>
        				<view class="right">
        					<image class="pic" mode="aspectFill" :src="item.cover" />
        				</view>
        			</navigator>
        		</view>
        	</swiper-item>
        	
        </swiper>
        <!-- 分享按钮组件 -->
        <goto-share />
        
        <!-- 登陆组件 -->
        <login ref="login" />
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import feedMixin from '@/mixins/todoFeed.js'
	export default {
	    mixins:[feedMixin],
		data() {
			return {
				swiperAdList: '',//广告位
				currentSwiperIndex:0,
				feedsList:[],//动态信息
				newsList:[],//新闻
				navBarShowTag:false,//头部导航,
				swiperHeight:'',
				swiperSliderFeedsHeight:'550px',
				swiperSliderNewsHeight:'550px',
				oldFeedSrcoll:0,
				oldNewScroll:0
				
			}
		},
		computed:{
			...mapState(['loginState', 'userInfo'])
		},
		onLoad() {
			this.getAdlist()
			this.getFeeds()
			this.getNews()
			uni.$on('indexUserLogin', ()=>{
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeedsList()
			})
			uni.$on('indexUserLogout', ()=>{
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeedsList()
			})
			
			// 发布新的动态后，触发数据更新
			uni.$on("indexFeedsUpdate", ()=>{
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeedsList()
			})
			
			// 个人中心删除一条动态后，触发更新首页数据
			uni.$on("indexFeedRemove", fid =>{
				this.$refs.waterfall.remove(fid);
			})
			
			// 用户点赞一条动态后触发数据更新
			uni.$on('indexFeedLoveChange', item => {
				this.$refs.waterfall.modify(item.id, "like_count", item.like_count);
				this.$refs.waterfall.modify(item.id, "has_like", item.has_like);
			})
			
		},
		//下拉刷新
		onPullDownRefresh(){
			if(this.currentSwiperIndex==0){
				this.feedsList=[]
				this.getFeeds()
			}else {
				this.newsList=[]
				this.getNews()
			}
		},
		//触底
		onReachBottom(){
			if(this.currentSwiperIndex==0){
				this.getFeeds()
			}else {
				this.getNews()
			}
		},
		onPageScroll(e){
			this.navBarShowTag=e.scrollTop>=300?true:false
			if(this.currentSwiperIndex==0){
				this.oldFeedSrcoll=e.scrollTop
			}else{
				this.oldNewScroll=e.scrollTop
			}
		},
		
		methods: {
			async getAdlist() {
				let adverts = await this.$u.api.getAdlist({
					space: '1,2,3'
				})
				this.swiperAdList = adverts.data.map(item => {
					return {
						id: item.id,
						link: item.data.link,
						image: item.data.image
					}
				})
			},
			async getFeeds(){
				let feeds = await this.$u.api.getFeeds()
				
				let l=feeds.data.feeds[0].images[0].size.split('x')
				let h=~~(358/(l[0]/l[1]))
				let feedList = feeds.data.feeds.map(item =>{
					
					return {
						...item,
						cover: this.BaseFileURL + item.images[0].file,
						avatar: !!item.user.avatar ? item.user.avatar.url : '/static/nopic.png',
						name: item.user.name,
					}
				})
				this.feedsList = [...this.feedsList, ...feedList]
			},
			async getNews(){  
				let news = await this.$u.api.getNews()
				let newsList= news.data.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.image.id
					}
				})
				this.newsList = [...this.newsList , ...newsList]
				this.swiperSliderNewsHeight=this.newsList.length*95+'px'
				this.swiperHeight=this.swiperSliderNewsHeight
			},
			gotoSwitch(url){
				uni.switchTab({
					url:url
				})
			},
			swiperChange(ind){
				this.currentSwiperIndex=ind
				uni.pageScrollTo({
					scrollTop:300,
					duration:500
				})
				if(ind==0){
					this.swiperHeight=this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						scrollTop:this.oldFeedSrcoll,
						duration:0
					})
				}else{
					this.swiperHeight=this.swiperSliderNewsHeight
					uni.pageScrollTo({
						scrollTop:this.oldNewScroll,
						duration:0
					})
				}
			},
			swiperSlider(e){
				this.currentSwiperIndex=e.detail.current
				uni.pageScrollTo({
					scrollTop:300,
					duration:500
				})
				if(this.currentSwiperIndex==0){
					this.swiperHeight=this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						scrollTop:this.oldFeedSrcoll,
						duration:0
					})
				}else{
					this.swiperHeight=this.swiperSliderNewsHeight
					uni.pageScrollTo({
						scrollTop:this.oldNewScroll,
						duration:0
					})
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	#sns {
		background-color: #f1f1f1;
	}

	// 推荐、咨询 按钮样式
	.tabs-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 750rpx;

		.one-nav {
			width: 120rpx;
			color: #9B9B9B;
			font-size: 36rpx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	.header-box {
		position: relative;
		left: 0;
		height: 500rpx;
		background-color: #f1f1f1;

		// 广告位轮播器相关样式
		.swiper {
			width: 750rpx;
			height: 400rpx;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 1;

			.banner-swiper-img {
				width: 750rpx;
				height: 400rpx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			}
		}

		.crile {
			width: 750rpx;
			height: 50rpx;
			position: absolute;
			left: 0;
			top: 355rpx;
			z-index: 9;
		}

		// 新鲜事 活动墙 按钮样式
		.card-header {
			position: absolute;
			left: 0;
			top: 320rpx;
			height: 160rpx;
			z-index: 10;
			width: 710rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.card-one {
				width: 328rpx;
				height: 96rpx;
				border-radius: 49rpx;
				background-color: #fff;
				margin: 0 10rpx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;

				.img {
					width: 44rpx;
					height: 44rpx;
					margin-left: 50rpx;
				}

				.iright {
					margin-left: 30rpx;
					text-align: left;
					color: #888;

					.title {
						margin-top: 5rpx;
						font-size: 30rpx;
						color: #001432;
					}

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						font-size: 20rpx;
						margin-top: -5rpx;
					}
				}
			}
		}

		// 推荐、咨询 按钮样式
		.tabs-box {
			width: 750rpx;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 480rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.one-nav {
				height: 80rpx;
				width: 110rpx;
				color: #9B9B9B;
				font-size: 36rpx;
				text-align: center;
				font-weight: blod;

				&.nav-actived {
					color: #0050FF;
				}
			}
		}
	}

	// 此刻 栏目样式\
	.swiper-box {
		background-color: #f1f1f1;
		padding: 60rpx 0 40rpx;
	}

	.sns-now {

		// 动态相关瀑布流样式
		.feeds-box {
			width: 735rpx;
			margin-left: 13rpx;
			padding-bottom: 20rpx;

			.feed-one {
				width: 358rpx;
				margin-bottom: 12rpx;
				background-color: #FFF;
				border-radius: 20rpx;

				position: relative;

				.feed-img {
					width: 358rpx;
					border-radius: 10rpx;
				}

				.feed-title {
					width: 350rpx;
					margin-top: 15rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #001432;
					text-align: left;
				}

				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #666;
					padding: 0 10rpx 16rpx;

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;

						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60rpx;
							padding: 0 10rpx;
							background-color: #FFFFFF;
						}
					}

					.avatar {
						margin-right: 10rpx;
						height: 40rpx;
						width: 40rpx;
						border-radius: 50%;
						border: 1rpx solid #eee;
					}

					.name {
						max-width: 120rpx;
						color: #757474;
					}

					.micon {
						width: 32rpx;
						height: 28rpx;
					}

					.love-count {
						padding-left: 10rpx;
						color: #757474;
					}
				}
			}
		}
	}

	// 轮播页面 资讯
	.sns-news {
		background-color: #fff;
		width: 750rpx;

		.one-new {
			width: 700rpx;
			height: 74px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			align-content: center;
			padding-bottom: 10px;
			padding-top: 10px;
			padding-left: 25rpx;
			padding-right: 25rpx;
			border-bottom: 1px solid #f1f1f1;

			.left {
				width: 490rpx;
				height: 140rpx;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.title {
					font-size: 30rpx;
					line-height: 48rpx;
					color: #001432;
					margin-top: 20rpx;
				}

				.uinfo {
					width: 490rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #999;

					.utime {
						font-size: 24rpx;

						.name {
							max-width: 120rpx;
							color: #777;
						}
					}
				}
			}

			.right {
				width: 120rpx;

				.pic {
					width: 120rpx;
					height: 120rpx;
					margin-top: 20rpx;
					border-radius: 6rpx;
				}
			}
		}
	}
</style>
